<template>
  <div>
    <a-modal
      @cancel="onCancel"
      :mask="true"
      :maskClosable="false"
      :visible="visible"
      title="重置密码"
      on-ok="handleOk"
    >
      <template slot="footer">
        <a-button key="back" @click="modalcancel"> 返回 </a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleOk"
        >
          确定
        </a-button>
      </template>
      <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
        <a-form :model="form"  @submit="handleOk" :rules="rules">
          <a-form-item
            label="旧密码"
            :labelCol="{ span: 7 }"
            :wrapperCol="{ span: 10 }"
            required
          >
            <a-input
              v-decorator="[
                'oldpwd',
                {
                  rules: [{ required: true, message: '密码不能为空!' }],
                },
              ]"
              type="password"
              placeholder="请输入"
            />
          </a-form-item>
          <a-form-item
            label="新密码"
            :labelCol="{ span: 7 }"
            :wrapperCol="{ span: 10 }"
            required
          >
            <a-input
              v-decorator="[
                'newpwd',

                {
                  rules: [{ required: true, message: '密码不能为空!' }],
                },
              ]"
              type="password"
              placeholder="请输入"
            />
          </a-form-item>
          <a-form-item
            label="确认密码"
            :labelCol="{ span: 7 }"
            :wrapperCol="{ span: 10 }"
            required
          >
            <a-input
              v-decorator="[
                'confimPwd',
                {
                  rules: [{ required: true, message: '密码不能为空!' }],
                },
              ]"
              type="password"
              placeholder="请输入"
            />
          </a-form-item>
        </a-form>
      </a-card>
    </a-modal>
  </div>
</template>
    <script>
export default {
  props: {
    visible: {
      type: [Boolean],
      default: false,
    },
    modalcancel: {
      type: [Function],
      default: () => {},
    },
  },
  data() {
    return {
      form: this.$form.createForm(this),
      formData: {
        oldPwd: null,
        newPwd: null,
        confimPwd: null,
      },
      value: 1,
      loading: false,
    };
  },
  methods: {
    handleOk(e) {
      e.preventDefault();
      this.loading = true;
      this.form.validateFields((err, values) => {
        console.log("values: ", values);
        console.log("err: ", err);
        if (!err) {
          console.log("Received values of form: ", values);
          if (values?.newPwd !== values?.confimPwd) {
            console.log("输入不一致 ", values);
            this.$message.warn("输入不一致");
          }
        }
      });
    },
    onCancel() {
      this.modalcancel();
    },
  },
};
</script>
